<template>
    <!-- 富文本编辑器 -->
    <div class="editor-box">
        <div id="editorElem3">
        </div>
    </div>
</template>
<script>
import E from 'wangeditor'
export default {
    name: 'editor',
    props:{
        content: String
    },
    data() {
        return {
            editorContent: this.content || '',
            obj: null
        }
    },
    methods: {
        getContent(){
            return this.editorContent;
        },
        setContent(){
            this.obj.txt.html(this.content)
        },
        clear(){
            this.obj.txt.html('<p><br></p>');
        }
    },
    created () {

    },
    mounted() {
        var editor = new E('#editorElem3')
        this.obj = editor;
        //editor.customConfig.uploadImgShowBase64 = true;   // 使用 base64 保存图片
        editor.customConfig.uploadImgServer = '/login/reception/uploadImg2Oss';  //上传图片到服务器
        // editor.customConfig.uploadImgServer = '/login/reception/htmlfileUpload';  //上传图片到服务器
        editor.customConfig.uploadFileName = 'file_path';
        editor.customConfig.uploadImgMaxSize = 20 * 1024 * 1024;//设置图片大小为20M
        editor.customConfig.uploadImgTimeout = 1000000; //图片上传超时限制10s
        //默认富文本的菜单选项是所有菜单
        // menus: ['head', 'bold', 'italic', 'underline', 'strikeThrough',
        // 'foreColor', 'backColor', 'link', 'list', 'justify', 'quote',
        // 'emoticon', 'image', 'table', 'video', 'code', 'undo', 'redo']
        editor.customConfig.menus = [
            // 'head',  // 标题
            // 'strikeThrough',  // 删除线
            // 'link',  // 插入链接
            'image',  // 插入图片
            // 'list',  // 列表
            'justify',  // 对齐方式
            // 'quote',  // 引用
            'emoticon',  // 表情
            // 'bold',  // 粗体
            // 'italic',  // 斜体
            // 'underline',  // 下划线
            // 'table',  // 表格
            // 'code',  // 插入代码
            'undo',  // 撤销
        ]

        // editor.customConfig.uploadImgHeaders = {
        //     'Accept': '*/*',
        //     'Authorization': 'Bearer ' + token    //头部token
        // }
        editor.customConfig.uploadImgHooks = {
            before: function(xhr, editor, files) {
                // 图片上传之前触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件

                // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
                // return {
                //     prevent: true,
                //     msg: '放弃上传'
                // }
            },
            success: function(xhr, editor, result) {
                // 图片上传并返回结果，图片插入成功之后触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
                // this.imgUrl = Object.values(result.data).toString()
            },
            fail: function(xhr, editor, result) {
                // 图片上传并返回结果，但图片插入错误时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
            },
            error: function(xhr, editor) {
                // 图片上传出错时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            },
            timeout: function(xhr, editor) {
                // 图片上传超时时触发
                // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
            },

            // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
            // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
            customInsert: function(insertImg, result, editor) {
                // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

                // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
                let url = Object.values(result.data)      //result.data就是服务器返回的图片名字和链接
                JSON.stringify(url)    //在这里转成JSON格式
                insertImg(url)
                // result 必须是一个 JSON 格式字符串！！！否则报错
            }
        }
        editor.customConfig.zIndex = 10;  //配置编辑区域的 z-index
        editor.customConfig.onchange = (html) => {
            this.editorContent = html
        }
        editor.create()
        editor.txt.html("<p>请输入帖子内容..</p>");

    }
}

</script>



<style lang="scss" scoped>
.editor-box {
    background-color: #fff;
}
.w-e-text p, .w-e-text h1, .w-e-text h2, .w-e-text h3, .w-e-text h4, .w-e-text h5, .w-e-text table, .w-e-text pre{
    font-size: 22px !important;
}
</style>
